<header mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
  <h4 style="pointer-events: none;">
    {{ 'PAC.KEY_WORDS.MODIFY' | translate: {Default: 'Modify'} }} {{ 'PAC.KEY_WORDS.DataSource' | translate: {Default: 'Data Source'} }}
  </h4>
</header>

<div mat-dialog-content>
  @if(dataSource?.type) {
    <div class="flex justify-center items-center text-lg">
        <img src="assets/images/db-logos/{{dataSource.type.type}}.png" width="64" height="64">
        {{dataSource.type.name}}
    </div>
  }

    <div class="pac-data-source-creation__stepper-content px-2">
        <form [formGroup]="formGroup" class="flex flex-col justify-start items-stretch">
            <ngm-input [ngClass]="{'ngm-input-error': nameCtrl.invalid}" [label]="'PAC.MENU.DATA_SOURCES.NAME' | translate: {Default: 'Name'}"
              formControlName="name" required>
              @if (nameCtrl.invalid) {
                <span ngmError>
                {{ 'PAC.MENU.DATA_SOURCES.NAME_REQUIRED' | translate: {Default: 'Name Required'} }}
                </span>
              }
            </ngm-input>
    
            <div class="flex justify-between items-center mx-2 mb-6">
              @if (enableLocalAgent) {
                <mat-slide-toggle formControlName="useLocalAgent" disableRipple labelPosition="before">
                    {{ 'PAC.MENU.DATA_SOURCES.USE_LOCAL_AGENT' | translate: {Default: 'Use Local Agent'} }}
                </mat-slide-toggle>
              }
    
                <div class="flex justify-end items-center gap-2">
                    <mat-label>{{ 'PAC.MENU.DATA_SOURCES.AuthType' | translate: {Default: 'Auth Type'} }}</mat-label>
                    <mat-button-toggle-group formControlName="authType" name="authType" ngmAppearance="outline" displayDensity="compact" color="accent">
                        <mat-button-toggle [value]="null"
                            [matTooltip]="'PAC.MENU.DATA_SOURCES.AuthType_None_Description' | translate: {Default: 'Unified system authorization, no need for users to provide accounts.'}"
                        >{{ 'PAC.MENU.DATA_SOURCES.AuthType_None' | translate: {Default: 'None'} }}</mat-button-toggle>
                        <mat-button-toggle [value]="AuthenticationEnum.BASIC"
                            [matTooltip]="'PAC.MENU.DATA_SOURCES.AuthType_Basic_Description' | translate: {Default: 'Users need to provide an account for authorization.'}"
                        >{{ 'PAC.MENU.DATA_SOURCES.AuthType_Basic' | translate: {Default: 'Basic'} }}</mat-button-toggle>
                    </mat-button-toggle-group>
                </div>
            </div>

        </form>
    
      @if (schema$()) {
        <formly-form
            [form]="options"
            [fields]="schema$()"
            [model]="model"
            />
      } @else {
        <list-content-loader></list-content-loader>
      }
    </div>
    
</div>

<mat-dialog-actions >
    <div ngmButtonGroup>
        <button mat-raised-button [disabled]="loading" (click)="ping()">
            {{ 'PAC.ACTIONS.PING' | translate: {Default: 'Ping'} }}
        </button>
    </div>
    <div ngmButtonGroup>
        <button mat-flat-button (click)="onCancel()">
            {{ 'PAC.ACTIONS.CANCEL' | translate: {Default: 'Cancel'} }}
        </button>
        <button mat-raised-button color="accent" [disabled]="formGroup.pristine||formGroup.invalid"
            (click)="onSave()">
            {{ 'PAC.ACTIONS.SAVE' | translate: {Default: 'Save'} }}
        </button>
    </div>
</mat-dialog-actions>
